<template>
  <cChart :option="chartOption"></cChart>
</template>

<script lang="ts" setup>
const local = useLocal()
//列表（父传子：接收）
const detectingTrendList: any = defineModel('detectingTrendList', { default: {} })
import { graphic } from 'echarts'
let category = [];
let dottedBase = +new Date();
let lineData = [];
let barData = [];
for (let i = 0; i < 7; i++) {
  let date = new Date((dottedBase += 3600 * 24 * 1000));
  category.push(
    [date.getMonth() + 1, date.getDate()].join('.')
  );
  let b = Math.random() * 200;
  let d = Math.random() * 200;
  barData.push(b);
  lineData.push(d + b);
}
const { chartOption } = useChartOption(() => {
  return {
    title: {
    text: t('data.data.60zec2kc2gk0'),
    textStyle: {
      color: local.theme == 'light' ? '#000000' : '#ffffff',
      fontStyle: 'normal',
      fontWeight: 600,
      fontFamily: 'Arial', 
      fontSize: 23, 
      align: 'center', 
      verticalAlign: 'top', 
      lineHeight: 20,
      backgroundColor: 'rgba(0,0,0,0)', 
      borderColor: '#ccc',
      borderWidth: 1, 
      borderRadius: 5,
    },
  },
    tooltip: {
      trigger: 'axis'
    },
    grid:{
      top:'25%',
      left:'5%',
      right:'5%',
      width:'90%',
      height:'65%'
    },
    legend: {
      // data: ['line', 'bar']
      textStyle: {
        color: local.theme == 'light' ? '#222222' : '#ffffff',
      },
      left: 'right',
      top: 'top',
      orient: 'vertical',
      align: 'left',
      itemWidth: 38,
      itemHeight: 15
    },
    xAxis: {
      data: detectingTrendList.value?.map((item: any) => {
        return item.dayDate
      }),
      axisLabel: {
        margin: 20
      },
      axisLine: {
        lineStyle: {
          color: local.theme == 'light' ? '#222222' : '#ffffff',
        }
      }
    },
    yAxis: [
    {
      type: 'value',
      position: 'left',
      axisLabel: {
        // formatter: function (value:any) {
        //     return parseInt(value);
        // }
        inside:false
      },
      minInterval: 1,
      splitLine: {
        lineStyle: {
          color: local.theme == 'light' ? 'rgba(0,0,0,0.2)' : 'rgba(255, 255, 255, 0.2)',
        }
      },
      name: t('components.detectingTrend.60zebbcmwgc9'),
      nameLocation: 'end',
      nameTextStyle: {
        color: local.theme == 'light' ? '#222222' : '#ffffff',
        align: 'right'
      },
      axisLine: {
        lineStyle: {
          color: local.theme == 'light' ? '#222222' : '#ffffff',
        }
      }
    },
    {
      type: 'value',
      position: 'right',
      axisLabel: {
        formatter: '{value} 架次',
        inside:false
      },
      minInterval: 1,
      splitLine: {
        show:false,
        lineStyle: {
          color: local.theme == 'light' ? 'rgba(0,0,0,0.2)' : 'rgba(255, 255, 255, 0.2)',
        }
      },
      name: t('components.detectingTrend.60zebbcmwgc0'),
      nameLocation: 'end',
      nameTextStyle: {
        color: local.theme == 'light' ? '#222222' : '#ffffff',
        align: 'right'
      },
      axisLine: {
        lineStyle: {
          color: local.theme == 'light' ? '#222222' : '#ffffff',
        }
      }
    }
  ],
    series: [
      {
        name:  t('components.detectingTrend.60zebbcmwgc7'),
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 12,
        yAxisIndex: 0,
        data: detectingTrendList.value?.map((item: any) => {
          return item.stayTime
        }),
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 255, 238, 1)' }
          ])
        },
      },
      {
        name:  t('components.detectingTrend.60zebbcmwgc8'),
        type: 'bar',
        barWidth: 24,
        itemStyle: {
          borderRadius: 0,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(76, 132, 255, 1)' }
          ]),
          shadowBlur: 15,
          shadowColor: 'rgba(76, 132, 255, .7)'
        },
        yAxisIndex: 1,
        // data: barData
        data: detectingTrendList.value?.map((item: any) => {
          return item.num
        })
      }
    ]
  }
});
</script>

<style scoped lang="less"></style>
